<template>
	<view>
    <head-box></head-box>
    <view class="tab-botton label">
      <view class="flex justify-end">
        <checkbox-group @change="allChoose">
          <label>
            <checkbox value="all"  :checked="allChecked"></checkbox> {{allChecked?'取消':'全选'}}
          </label>
        </checkbox-group>
      </view>
      <checkbox-group class="block" @change="changeCheckbox">
        <view v-for="(item,index) in checkboxData" :key="index" class="checked-btn">
          <label>
            <checkbox :value="item.gpinfoCode" :checked="checkedArr.includes(item.gpinfoCode)"></checkbox>
            <text>{{item.gpinfoName}}</text>
          </label>
        </view>
      </checkbox-group>

      <u-button hover-class="none" plain :custom-style="customStyle" @click="onsubMit">
        <text class="text">提交</text>
      </u-button>
    </view>
    <tabs-box></tabs-box>
	</view>
</template>

<script>
import {gpGpinfoListAll,editGpinfoCodeTags,getGpinfoCodeTags} from '@/api/group'
	export default {
		data() {
			return {
        //按钮样式
        customStyle: {
          width: '455rpx',
          height: '60rpx',
          background: 'linear-gradient(180deg, #82A5FF, #386FFF)',
          borderRadius: '30rpx',
        },
        isChecked:false,
        checkboxData:[],//数据
        checkedArr:[], //复选框选中的值
        allChecked:false //是否全选
			};
		},
    onLoad(){
      this.gpGpinfoListAll({flowStatus:2})
    },
    methods: {
      //提交 数据
      onsubMit(){
         let str = ''
        if(this.checkedArr.length===1){
          str = this.checkedArr.join('')
        } else {
          str = this.checkedArr.join(',')
        }
        this.$api.showLoading({title:'操作中...'})
        editGpinfoCodeTags(str).then(res=>{
          this.$api.hideLoading()
          const {code,message,result} =res
          if(code===200){
            this.$api.msg(result)
            this.$api.leftBack()
          }else {
            this.$api.msg(message)
          }
        }).catch(e=>{
          this.$api.hideLoading()
          console.log ( e )
        })
      },
      //获取关注群团编号
      getGpinfoCodeTags(){
        getGpinfoCodeTags().then(res => {
          const {result,code} = res
          if(result.length){
            const list = []
            this.checkboxData.filter((item,index)=>{
              const split = result.split ( ',' )
              split.map(child=>{
                if(item.gpinfoCode===child){
                  list.push(child)
                }
              })
            })
            if(list.length){
              this.checkedArr = list
              if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
                this.allChecked=true;
              }else{
                this.allChecked=false;
              }
            }
          } else {


          }
        }).catch(e=>{
          console.log ( e )
        })
      },
      //群团信息-列表查询
      async gpGpinfoListAll ( param ) {
        gpGpinfoListAll ( param ).then ( async res => {
          const { result , code } = res
          if ( code === 200 ) {

            this.checkboxData = result;
            this.checkboxData.map(item=>{
              this.$set(item,'checked',false)
            })
            if(this.checkboxData.length){
            await  this.getGpinfoCodeTags()
            }
          }
        } )
      } ,
      // 单个复选框事件
      checkboxChange(e) {
        let values = e.detail.value;
        if(values[0]==1){
          this.isChecked=true;
        }else{
          this.isChecked=false;
        }
      },
      // 多选复选框改变事件
      changeCheckbox(e){
        this.checkedArr = e.detail.value;
        // 如果选择的数组中有值，并且长度等于列表的长度，就是全选
        if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
          this.allChecked=true;
        }else{
          this.allChecked=false;
        }
      },
      // 全选事件
      allChoose(e){
        let chooseItem = e.detail.value;
        // 全选
        if(chooseItem[0]=='all'){
          this.allChecked=true;
          for(let item of this.checkboxData){
            let itemVal=String(item.gpinfoCode);
            if(!this.checkedArr.includes(itemVal)){
              this.checkedArr.push(itemVal);
            }
          }
        }else{
          // 取消全选
          this.allChecked=false;
          this.checkedArr=[];
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
@import"@/style/mySelectChecked"
</style>
